<template>
	<!-- <view class="status_bar"></view> -->
	<view class="container">
		<StatusBar></StatusBar>
		<view class="dialog_container">
			<view class="content-container" v-for="(dialog, index) in dialogList" :key="index"
				:class="{ left: index % 2 != 0, right: index % 2 == 0 }">
				<view :class="{ loading: dialog == '' && index % 2 != 0 }"></view>

				<view style="display: flex; flex-direction: column">
					{{ dialog }}
				</view>
			</view>
		</view>

		<view style="display: flex; justify-content: space-between" id="input-box" ref="inputBox">
			<view class="input-area">
				<!-- <input type="text" v-model="prompt" style="height: 80rpx; margin-left: 40rpx" /> -->
				<textarea v-model="prompt" style="margin: 25rpx; width: 500rpx; height: 250rpx"
					placeholder="输入问题,点击按钮发送" :adjust-position="false"
					@keyboardheightchange="showInputDialog"></textarea>
				<image @click="getGPT" class="post_icon" src="../../static/post.svg"></image>
			</view>
		</view>

		<view class="pop-container" :style="{bottom:height+'px'}" v-if="height!=0">


			<textarea v-model="prompt" style="margin: 25rpx; width: 500rpx; height: 250rpx" placeholder="请直接输入你的问题"
				:adjust-position="false"></textarea>

		</view>
		<!-- 键盘弹出的时候把内容往上顶一些 -->
	</view>
</template>

<script lang="ts" setup>
	import { computed, ref } from 'vue';
	const prompt = ref('');
	const dialogList = ref([]);
	const ans = ref('');
	const height = ref(0);
	// const addView = () => {
	//   if (text.value != '') {
	//     dialogList.value.push(text.value);
	//     dialogList.value.push('回答。。。');
	//     text.value = '';
	//   }
	// };
	const inputBox = ref();
	const showInputDialog = (e) => {
		console.log(e.detail);
		height.value = e.detail.height;
		let test = inputBox.value;

		console.log(test);
	};


	const getGPT = () => {
		if (prompt.value != '') {
			dialogList.value.push(prompt.value);
			dialogList.value.push('');
			//记录这个index后面替换这一项
			let index = dialogList.value.length - 1;
			uni.request({
				url: 'http://69.165.78.230:3000/gpt',
				data: {
					prompt: prompt.value,
				},
				method: 'POST',
				success: (res) => {
					console.log(res.data.response.message.content);
					ans.value = res.data.response.message.content;
					dialogList.value[index] = ans.value;
				},
				fail: (e) => {
					uni.showToast({
						title: '请求超时',
						icon: 'none',
					});
				},
			});
			prompt.value = '';
			ans.value = '';
		}
	};
</script>

<style scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #f5f5f5;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.dialog_container {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 1050rpx;
		overflow: auto;
		margin-bottom: 30rpx;
		border-radius: 40px 40px 0 0;
		border: #b0b0b0;
		padding-top: 40rpx;
		box-shadow: inset 0 0 5px #c2c2c2;
		/* background: url('../../static/chatbg.png'); */
		background-color: rgba(255, 255, 255, 0.8);
	}

	.content-container {
		width: 50%;
		margin: 20rpx;
		padding: 50rpx;
		border: 2px solid black;
		border-radius: 30px;
	}

	.left {
		background-color: #00a8cc;
		margin-right: 150rpx;
	}

	.right {
		background-color: aliceblue;
		margin-left: 200rpx;
	}

	.input-area {
		border: 4rpx solid black;
		border-radius: 20px;
		height: 390rpx;
		margin-top: -10rpx;
		margin-left: 15rpx;
		box-shadow: 0 0 8px #b0b0b0;
	}

	.post_icon {
		width: 70rpx;
		height: 70rpx;
		margin-left: 430rpx;
		margin-top: -30rpx;
	}

	.user_avatar {
		margin-left: 300rpx;
	}

	.loading {
		display: block;
		position: relative;
		width: 6rpx;
		height: 10rpx;
		margin-left: 180rpx;
		animation: rectangle infinite 1s ease-in-out -0.2s;
		background-color: #000;
	}

	.loading:before,
	.loading:after {
		position: absolute;
		width: 6px;
		height: 10px;
		content: '';
		background-color: #000;
	}

	.loading:before {
		left: -14px;

		animation: rectangle infinite 1s ease-in-out -0.4s;
	}

	.loading:after {
		right: -14px;

		animation: rectangle infinite 1s ease-in-out;
	}

	.input-container {
		position: relative;
		transition: all 100ms ease-in-out;
	}

	.moved {
		transform: translateY(-var(--height.value));
	}

	.pop-container {
		position: absolute;
		background-color: #fff;
		bottom: 0;
		width: 100%;
		height: 100px;

	}

	@keyframes rectangle {

		0%,
		80%,
		100% {
			height: 20px;
			box-shadow: 0 0 #000;
		}

		40% {
			height: 30px;
			box-shadow: 0 -20px #000;
		}
	}
</style>